<script setup>
import { ref, reactive } from 'vue'
// import { useRouter } from 'vue-router';
// import { ElMessage } from 'element-plus'

const windowHeight = ref(window.innerHeight)
// const router = useRouter();
const form = reactive({
  account: '',
  password: '',
  type: 1,
})

const activeName = ref('account')

const loginButtDisabled = ref(false)
const loginLoading = ref(false)
const getMsgCodeBtnDisabled = ref(false)

const onLogin = () => {
  console.log(form)

  // if (!form.account) {
  //     ElMessage.warning('缺少账号');
  //     return false;
  // }
  // if (!form.password) {
  //     ElMessage.warning('缺少验证码');
  //     return false;
  // }

  // loginButtDisabled.value = true
  // loginLoading.value = true
  // login(form).then( res => {
  //     loginLoading.value = false

  //     // console.log(res)
  //     if (res.status !== 200) {
  //         loginButtDisabled.value = false
  //         ElMessage.error(`服务异常${res.status}`);
  //         return false;
  //     }
  //     if (res.data.code == 0) {
  //         ElMessage.success(res.data.message);
  //         tokenStore.setToken(res.data.data.token)
  //         localStorage.setItem('token', res.data.data.token)
  //         webSocketStore.initWebSocket()
  //         // vue router 跳转
  //         router.push('/')

  //     } else {
  //         loginButtDisabled.value = false
  //         ElMessage.error(res.data.message);
  //     }
  // }).catch(err => {
  //     getMsgCodeBtnDisabled.value = false
  //     loginButtDisabled.value = false
  //     console.log(err)
  // })
}
const onMsgCode = () => {
  console.log('onMsgCode')
  // const { account }= form
  // if (!account) {
  //     ElMessage.warning('缺少账号');
  //     return false;
  // }
  // getMsgCodeBtnDisabled.value = true
  // smsLoading.value = true
  // getSmscodeApi({
  //     account
  // }).then( res => {
  //     smsLoading.value = false
  //     // console.log(res)
  //     if (res.status !== 200) {
  //         getMsgCodeBtnDisabled.value = false
  //         ElMessage.error(`服务异常${res.status}`);
  //         return false;
  //     }
  //     if (res.data.code == 0) {
  //         ElMessage.success(res.data.message);
  //     } else {
  //         getMsgCodeBtnDisabled.value = false
  //         ElMessage.error(res.data.message);
  //     }
  // }).catch(err => {
  //     getMsgCodeBtnDisabled.value = false
  //     smsLoading.value = false
  //     console.log(err)
  // })
}
</script>

<template>
  <div class="outer-layer" :style="{ height: `${windowHeight}px` }">
    <div class="outer-layer-content">
      <div class="content_box">
        <div class="content_left"></div>
        <div class="content_right">
          <h2 style="font-size: 24px">登录</h2>
          <div class="cr_top">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="账号登录" name="account">
                <el-form label-width="auto" style="max-width: 600px">
                  <el-form-item label="">
                    <el-input
                      v-model="form.account"
                      size="large"
                      type="text"
                      placeholder="请输入账号"
                      @keyup.enter="onMsgCode"
                    />
                  </el-form-item>
                  <el-form-item label="">
                    <el-input
                      v-model="form.password"
                      size="large"
                      style="max-width: 600px"
                      placeholder="请输入验证码"
                      type="text"
                      @keyup.enter="onLogin"
                    >
                      <template #append>
                        <el-button
                          type="success"
                          v-loading="smsLoading"
                          :disabled="getMsgCodeBtnDisabled"
                          @click="onMsgCode"
                          >获取验证码</el-button
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-button
                      type="primary"
                      size="large"
                      style="width: 100%"
                      :disabled="loginButtDisabled"
                      v-loading="loginLoading"
                      @click="onLogin"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="扫码登录" name="or_code">
                <div style="text-align: center; height: 174px; line-height: 174px">暂未开放</div>
              </el-tab-pane>
            </el-tabs>
            <div class="account-oprate">
              <el-button type="text">申请账号</el-button>
              <!-- <a href="javascript:;" target="_blank">申请账号</a> -->
            </div>
          </div>
        </div>
      </div>
      <div class="login_footer">
        Copyright © 2024-2025<a href="https://www.longfenmall.com/" target="_blank">龙芬商城</a
        > 所有版权
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 以下css 样式 来源: https://kuli8.com/demo/html_green_admin_login/ */
.outer-layer {
  width: 100%;
  min-width: 1200px;
  min-height: 100%;
  background: #ebf4fd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-layer .outer-layer-content {
  width: 1080px;
  padding: 60px 0;
}
.content_box {
  width: 100%;
  min-height: 600px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  box-shadow: 0px 4px 10px 0px #e1f0ff;
}

.content_left {
  width: 780px;
  background:
    url('@/assets/htgl-bg.png') no-repeat center center,
    #248bf7;
  background-color: #248bf7;
  background-size: 100% auto;
}
.content_left {
  position: relative;
}
.content_left-text {
  position: absolute;
  left: 40px;
  bottom: 32px;
  color: #fff;
  display: block;
}
.content_left-text .title {
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
}
.content_left-text .text {
  display: flex;
  align-items: center;
}
.content_left-text .text-link {
  font-size: 14px;
  line-height: 22px;
}
.content_left-text .text-link,
.content_left-text .text-link:hover {
  color: #fff;
}
.content_left-text .text-cut {
  width: 1px;
  height: 14px;
  background: #fff;
  margin: 0 14px;
}
.content_right {
  width: 600px;
  padding: 56px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content_right h2 {
  font-size: 32px;
  font-weight: bold;
  color: #13161b;
  line-height: 40px;
  text-align: center;
  margin-bottom: 40px;
}

.content_right h3 {
  font-size: 14px;
  font-weight: 400;
  color: #8d949f;
  line-height: 22px;
  text-align: center;
  margin-bottom: 40px;
}

.content_right .cr_top {
  position: relative;
}
.content_right .cr_top {
  position: relative;
}

.cr_top .ct_input {
  position: relative;
}

.login_footer {
  font-size: 14px;
  font-weight: 400;
  color: #8d949f;
  line-height: 22px;
  text-align: center;
  margin-top: 24px;
}

.login_footer a {
  color: #8d949f;
}
.account-oprate {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.account-oprate a {
  color: #60656e;
}
</style>
